<template>
    <div>
      <Home_head />
      <div class="personalCenter">
        <div class="user_info">
          <el-upload
          class="avatar-uploader"
          action=""
          :http-request="uploadImge"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="MyHeader"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar1" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span class="user_name" style="color: black;">{{ userName }}</span>
          <el-tooltip placement="bottom">
            <input type="text" class="user_note" v-model="userNote" id="user_note" v-on:blur="changeNote()" v-on:focus="change()"/>
            <div slot="content">{{ userAllNote }}</div>
          </el-tooltip>
          <i class="el-icon-edit" id="el-icon-edit" style="position: absolute;left: 280px;top: 190px;" @click="compile()"></i>
        </div>
        <div class="navigationBar">
          <span class="bar"  @click="topersonalCenter()">文章</span>
          <span class="bar" @click="toCollectView()">收藏</span>
          <span class="bar" @click="toAttentionView()">关注</span>
          <span class="bar" @click="toSetView()">设置</span>
          <span style="position: absolute; right: 30px;">关注：{{ attentionNum }}</span>
          <span style="position: absolute; right: 120px;">粉丝: {{ fansNum }}</span>
        </div>
        <div>
            <h2 style="margin-left: 30px;">个人设置</h2>
            <div style="margin: 30px;">
                <span>用户名：</span>
                <input v-model="userName" style="width: 200px; height: 30px; margin-left: 58px; border: #1e87dd 2px solid; border-radius: 5px; padding-left: 15px;">
                <button style="width: 50px; height: 30px; border-radius: 5px;background-color: #1e87dd; border: 0px; color: #fff; margin-left: 80px;" @click="changeName()">修改</button>
            </div>
            <div style="margin: 30px;">
                <span>用户性别：</span>
                <span v-if="sex==0" style="margin-left: 42px;">男</span>
                <span v-if="sex==1" style="margin-left: 42px;">女</span>
            </div>
            <div style="margin: 30px;">
                <span>用户头像：</span>
                <span style="margin-left: 42px; color: greenyellow;">用户头像请点击上方的头像进行修改</span>
            </div>
            <div style="margin: 30px;">
                <span>用户手机号：</span>
                <span style="font-size: 1px; color: #1e87dd; margin-left: 30px;" v-if="!isuserPhone" @click="showbindPhone()">{{ userPhone }}</span>
                <input v-model="userPhone" style="width: 200px; height: 30px; margin-left: 30px; border: #1e87dd 2px solid; border-radius: 5px; padding-left: 15px;" v-if="isuserPhone">
                <button style="width: 50px; height: 30px; border-radius: 5px;background-color: #1e87dd; border: 0px; color: #fff; margin-left: 80px;" v-if="isuserPhone" @click="bindPhone()">绑定</button>
            </div>
            <div style="margin: 30px;">
                <span>用户邮箱号：</span>
                <span style="font-size: 1px; color: #1e87dd; margin-left: 30px;" v-if="!isuserEmile" @click="showbindEmile()">{{ userEmile }}</span>
                <input v-model="userEmile" style="width: 200px; height: 30px; margin-left: 30px; border: #1e87dd 2px solid; border-radius: 5px; padding-left: 15px;" v-if="isuserEmile">
                <button style="width: 50px; height: 30px; border-radius: 5px;background-color: #1e87dd; border: 0px; color: #fff; margin-left: 80px;" v-if="isuserEmile" @click="bindEmile()">绑定</button>
            </div>
            <div style="margin: 30px;">
                <span style="margin-right: 42px;">用户生日：</span>
                <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
                <button style="width: 50px; height: 30px; border-radius: 5px;background-color: #1e87dd; border: 0px; color: #fff; margin-left: 74px;" @click="changeBirthday()">修改</button>
            </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  import Home_head from "@/components/Home_head.vue";
  import Blog_card from "../components/my_blogcard.vue"
  var token = localStorage.getItem("user_Token");
  export default {
    components: {
      Home_head,
      Blog_card,
    },
    data() {
      return {
        imageUrl:"",
        MyHeader: { Authorization: token },
        userName: String,
        userNote:String,
        userPhone:"该用户还没有绑定手机号，点击进行绑定手机号吧！",
        userEmile:"该用户还没有绑定邮箱，点击进行绑定邮箱吧！",
        isuserPhone:false,
        isuserEmile:false,
        sex:0,
        attentionNum:Number,
        fansNum:Number,
        userAllNote:String,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        value1:'',
      };
    },
    created:function(){
      this.queryInfo();
      this.userMap();
    },
    methods: {
      uploadImge(param){
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append("token",token)
      const url = '/uploadImge'
      axios.post(url,formData).then(data => {
        console.log('上传图片成功')
        this.$message({
                message: '头像切换成功',
                type: 'success'
                });
        location.reload();
      }).catch(response => {
       console.log('图片上传失败')
     })
    },
      change(){
        this.userNote=this.userAllNote;
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
  
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
      compile(){
              document.getElementById("user_note").focus();
              document.getElementById("el-icon-edit").style.display="none"
      },
      showbindPhone(){
        if(this.userPhone=="该用户还没有绑定手机号，点击进行绑定手机号吧！"){
            this.userPhone=""
            this.isuserPhone=true;
        }
      },
      showbindEmile(){
        if(this.userEmile=="该用户还没有绑定邮箱，点击进行绑定邮箱吧！"){
            this.userEmile=""
            this.isuserEmile=true;
        }
      },
      changeName(){
        axios.post("/changeName", {
                  userToken : localStorage.getItem("user_Token"),
                  userName :this.userName,
              }).then(response=>{
                this.$message({
                message: '姓名修改成功，请重新登录',
                type: 'success'
                });
                localStorage.removeItem("user_Token")
                localStorage.removeItem("username")
                this.$router.push("/")
              })
      },
      bindPhone(){
        axios.post("/bindPhone", {
                  userToken : localStorage.getItem("user_Token"),
                  userPhone :this.userPhone,
              }).then(response=>{
                this.$message({
                message: '手机号绑定成功',
                type: 'success'
                });
                location.reload();
              })
      },
      bindEmile(){
        axios.post("/bindEmile", {
                  userToken : localStorage.getItem("user_Token"),
                  userEmile :this.userEmile,
              }).then(response=>{
                this.$message({
                message: '邮箱绑定成功',
                type: 'success'
                });
                location.reload();
              })
      },
      changeBirthday(){
        axios.post("/changeBirthday", {
                  userToken : localStorage.getItem("user_Token"),
                  userBirthday :this.value1,
              }).then(response=>{
                this.$message({
                message: '生日修改成功',
                type: 'success'
                });
                location.reload();
              })
      },
      queryInfo(){
        axios.post("/queryInfo", {
                  userToken : localStorage.getItem("user_Token"),
              }).then(response=>{
                this.userName=response.data.userName
                this.imageUrl=response.data.userHead
                if(response.data.userNote!=null){
                  if(response.data.userNote.length<10){
                   this.userNote=response.data.userNote
                   this.userAllNote=response.data.userNote
                  }else{
                    this.userNote=response.data.userNote.substring(0,9)+"......"
                    this.userAllNote=response.data.userNote
                  }
                }else{
                  this.userNote="这个人什么都没有留下"
                }
                this.fansNum=response.data.fansNum
                this.attentionNum=response.data.attentionNum
              })
      },
      userMap(){
        axios.post("/userMap", {
                  userToken : localStorage.getItem("user_Token"),
              }).then(response=>{
                    this.value1=response.data.Birthday
                    if(response.data.userPhone!=""){
                        this.userPhone=response.data.userPhone
                    }
                    if(response.data.userEmile!=""){
                        this.userEmile=response.data.userEmile
                    }
              })
      },
      changeNote(){
        if(this.userNote!=this.userAllNote){
        axios.post("/changeNote", {
                  userName:this.userName,
                  userNote:this.userNote,
              }).then(response=>{
                this.$message({
                message: '简介修改成功',
                type: 'success'
                });
                this.userAllNote=this.userNote;
                this.userNote=this.userNote.substring(0,9)+"......"
                document.getElementById("el-icon-edit").style.display="block"
              })
        }else{
          this.userNote=this.userNote.substring(0,9)+"......"
          document.getElementById("el-icon-edit").style.display="block"
        }
      },
      topersonalCenter(){
          this.$router.push("/personalCenter")
      },
      toCollectView(){
        this.$router.push("/collect")
      },
      toAttentionView(){
          this.$router.push("/attention")
      },
      toSetView(){
        this.$message({
                message: '请不用重复点击同一个url!',
                type: 'error'
                });
      },
    },
  };
  </script>
  
  <style>
  .personalCenter {
    position: absolute;
    top: 50px;
    left: 350px;
    background-color: #fff;
    width: 900px;
    height: 800px;
  }
  .navigationBar{
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-bottom: #000000 solid 1.5px;
  }
  .user_info {
    display: block;
    background-image: url(../assets/580cbb24aff1e6005043fb5b9c216.jpg);
    height: 300px;
  }
  .user_name {
    position: absolute;
    left: 130px;
    top: 155px;
    font-size: 23px;
    color: #3a97e4;
  }
  .user_note {
    position: absolute;
    left: 130px;
    top: 190px;
    border: 0px;
    background-color: rgba(0,0,0,0);
    outline: none;
  }
  .bar{
      color: #000000;
      margin-left: 30px;
  }
  
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    left: 20px;
    top: 150px;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar1 {
    width: 80px;
    height: 80px;
    display: block;
  }
  </style>